<style scoped lang="scss">
  .basic_data_box {
    .toolbars {
      .otherbar {
        float: right;
        .selectservicer,.searchbtn  {
          display: inline-block;
        }
      }
    }
    .clearb {
      margin-bottom: 15px;
    }
  }
</style>

<template>
  <div class="basic_data_box">
    <div class="toolbars">
      <div class="otherbar">
        <date-time @commitPicker="getPicker" class="mrgr5 mrgb5"></date-time>
        <el-button class="searchbtn mrgb5" type="primary" plain size="small" @click="_search"><i class="fa fa-search"></i> 查询</el-button>
      </div>
    </div>
    <div class="clearb"></div>
    <echart id="basicEchart" title="基础数据" width="100%" height="80vh" :option="options"></echart>
  </div>
</template>

<script>
import dateTime from "@/components/DateTime"
import echart from "@/components/Echarts/Index";
export default {
  name: "basic",
  components: {
    dateTime,
    echart
  },
  data() {
    return {
      options: {},
      listQuery: {
        serverId: null,
        beginTime: null,
        endTime: null
      }
    };
  },
  mounted() {
    this.setOptions();
  },
  methods: {
    setOptions() {
      let legendData = ["NU", "AU", "PU", "活跃付费率", "总收入", "ARPU", "ARPPU"]
      let xAxisData = []
      let series = []
      for (let i = 1; i <= 31; i++) {
        let time = "2019-08-" + (i < 10 ? "0" + i : i)
        xAxisData.push(time)
      }
      for (let i = 0; i < legendData.length; i++) {
        let temp = {
          name: legendData[i],
          type: "bar",
          stack: "basic",
          barWidth: "30%",
          barMaxWidth: "20px",
          barMinHeight: "10",
          data: []
        }
        for (let k = 0; k < 31; k++) {
          let item = Math.floor(Math.random() * 100)
          temp.data.push(item)
        }
        series.push(temp)
      }
      this.options = {
        tooltip: {
          trigger: "axis"
        },
        legend: {
          data: legendData
        },
        grid: {
          containLabel:true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        dataZoom: {
          show: true,
          start: 0,
          end: 100
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          axisLabel: {
            rotate: 30,
            interval: 0
          },
          data: xAxisData
        },
        yAxis: {
          type: "value",
          axisTick: {
            
          },
          axisLabel: {
            formatter: "{value}"
          }
        },
        series: series
      }
    },
    getPicker(val) {
      this.listQuery.beginTime = val[0]
      this.listQuery.endTime = val[1]
    },
    _search() {
      
    }
  }
};
</script>